<template>
  <el-card class="h-80vh" body-style="height: 100%;box-sizing: border-box;">
    <el-row justify="space-between">
      <el-text class="mx-1" size="large" type="warning"
        >客服系统是付费模块，需购买任意客服账号后才可使用</el-text
      >
      <el-button
        @click="router.push('/user/profile/systemBuy')"
        type="primary"
        style="padding: 20px 66px"
        >购买更多套餐</el-button
      >
    </el-row>
    <el-empty v-if="skuDataList.length == 0" description="暂无数据" />
    <el-row v-else class="mt-48px" style="height: calc(100% - 38px - 88px)">
      <el-scrollbar class="w-full">
        <div class="grid grid-cols-3 grid-rows-3 mx-auto my-0 box-border w-50% grid-gap-34px p-1px">
          <div
            v-for="(item, index) in skuDataList"
            :key="index + 'sku'"
            @click="selectSku(item)"
            class="flex flex-col items-center"
          >
            <div
              :class="{ active: orderConfirmParams.skuId == item.id }"
              class="bg2 box-border w-200px b-rd-10px py-30px text-center"
              style="2px solid rgb(255, 255, 255)"
            >
              <div class="active-title">
                <div class="active-title text-30px font-700 text-[var(--el-color-primary)]">
                  {{ item.num }}{{ item.unit }}
                </div>
                <div v-if="item.expireTime != 0" class="mt-10px text-12px"
                  >{{ item.expireTime }}天</div
                >
              </div>
              <el-divider />
              <p class="mt-10px text-12px text-#999999 line-through">原价：{{ item.oldPrice }}元</p>
              <p class="text-16px font-700 text-red !mt-4px">现价：{{ item.price }}元</p>
            </div>
            <el-button
              class="mt-30px w-200px flex"
              :loading="orderConfirmParams.skuId == item.id ? confirmLoading : false"
              type="primary"
              @click="onConfirmOrder(item)"
            >
              立即购买
            </el-button>
          </div>
        </div>
      </el-scrollbar>
      <!-- 个人版，需要指定用户 -->
      <div v-if="selectedProduct && selectedProduct == 1">
        <el-form>
          <el-form-item label="指定员工" required>
            <el-select v-model="orderConfirmParams.userId" placeholder="请选择员工">
              <el-option
                v-for="user in userList"
                :key="'user' + user.id"
                :label="user.nickname"
                :value="user.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-row>
  </el-card>
</template>
<script setup lang="ts">
import * as PayApi from '@/api/system/pay'
import { getProductSkuListByCode } from '@/api/system/productsku'
import * as UserApi from '@/api/system/user'
defineOptions({ name: 'SkuForm' })

/** 是否需要显示用户下拉选择框 */
const selectedProduct = ref(null)
/*企业用户*/
const userList = ref([])
/** 规格套餐list */
const skuDataList = ref([])
/** 提交上传form */
const orderConfirmParams = reactive({
  skuId: null,
  userId: null
})
/** 按钮加载动作 */
const confirmLoading = ref(false)
/** 获取规格列表 */
const getList = async () => {
  selectedProduct.value = 2
  if (selectedProduct.value == 1) {
    getUserList()
  }
  skuDataList.value = await getProductSkuListByCode('service-account')
  orderConfirmParams.skuId = null
  orderConfirmParams.userId = null
}

/*获取用户*/
const getUserList = async () => {
  userList.value = await UserApi.getSimpleUserList()
}

// 选择规格
const selectSku = (sku) => {
  orderConfirmParams.skuId = sku.id
}
const router = useRouter()
const { push } = useRouter()
// 确认订单
const onConfirmOrder = async (sku) => {
  orderConfirmParams.skuId = sku.id
  if (selectedProduct.value == 1 && orderConfirmParams.userId == null) {
    ElMessage.error('请选择员工')
    return
  }
  confirmLoading.value = true
  ElMessage.success('订单正在创建')
  const data = await PayApi.confirmOrder({ ...orderConfirmParams })
  confirmLoading.value = false
  push('/pay/balance?preOrderNo=' + data.preOrderNo)
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.active {
  border-color: #0052cc !important;
  .active-title {
    color: #0052cc !important;
  }
}
.bg2 {
  background-blend-mode: normal, color-burn;
  background: #eff3f6;
}
</style>
